<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router';

const checked = ref()
const router = useRouter()
function changeClick() {
    showToast('跳到登录页面去')
}

function quitClick() {
    localStorage.removeItem('userData')
    router.push('/login')
}
</script>
<template>
    <div class="header">
        <span @click="$router.back()" class='back'>
            <van-icon name="arrow-left" />
        </span>
        <span>设置</span>
    </div>
    <div class="main">
        <div class="top" @click="changeClick">
            <van-cell title="更换手机号码" is-link value="180****6666" style="border-radius:0.1rem; " />
        </div>
        <div class="center">
            <van-cell title="修改登录密码" is-link style="border-radius:0.1rem 0.1rem 0 0; " />
            <van-cell title="修改支付密码" is-link style="border-radius: 0 0 0.1rem 0.1rem; " />
        </div>
        <div class="bottom">
            <van-cell center title="消息通知" style="border-radius:0.1rem 0.1rem 0 0; ">
                <template #right-icon>
                    <van-switch v-model="checked" active-color="#70b603" />
                </template>
            </van-cell>

            <van-cell title="清除缓存" is-link value="10.2M" />
            <van-cell title="关于我们" is-link />
            <van-cell title="版本更新" is-link value="V1.0.1" style="border-radius: 0 0 0.1rem 0.1rem; " />
        </div>
        <van-button class="quit-btn" @click="quitClick">退出登录</van-button>

    </div>
</template>
<style lang="scss" scoped>
.header {
    height: 0.6rem;
    background-color: #1678ff;
    font-size: 0.2rem;
    color: white;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0 0.1rem 0.1rem 0.1rem;
    box-sizing: border-box;
    position: relative;

    .back {
        position: absolute;
        left: 0.1rem;
    }

}

.main {
    height: calc(100% - 0.6rem);
    background-color: #f2f2f2;

    padding-top: 0.2rem;
    box-sizing: border-box;

    .top,
    .center,
    .bottom {
        width: 90%;
        margin: 0.1rem 5%;
    }

    .quit-btn {
        width: 100%;
        position: absolute;
        bottom: 0;
        color: #1678ff;
    }
}
</style>